<template>
  <div>
    <!-- 头部区域开始 -->
    <div class="my-header">
      <!-- 未登录区域开始 -->
      <div class="loginNone" v-if="!$store.state.userToken">
        <div class="loginNone-con" @click="$router.push('/login')">
          <van-image :src="require('../../../assets/mobile.png')" />
          <p>登录/注册</p>
        </div>
      </div>
      <!-- 未登录区域结束 -->
      <!-- 已登录区域开始 -->
      <div class="alreadyLogin" v-else>
        <div class="myInfo">
          <div class="myInfo-left">
            <van-image
              lazy-load
              :src="infoList.photo"
            />
            <p>{{infoList.name}}</p>
          </div>
          <div class="myInfo-right">
            <van-button class="editInfo" type="small" @click="$router.push(`/myedit/${infoList.id}`)">编辑资料</van-button>
          </div>
        </div>
        <ul>
          <li>
            <p class="count">{{infoList.art_count}}</p>
            <p class="text">头条</p>
          </li>
          <li>
            <p class="count">{{infoList.follow_count}}</p>
            <p class="text">关注</p>
          </li>
          <li>
            <p class="count">{{infoList.like_count}}</p>
            <p class="text">粉丝</p>
          </li>
          <li>
            <p class="count">{{infoList.fans_count}}</p>
            <p class="text">获赞</p>
          </li>
        </ul>
      </div>
      <!-- 已登录区域结束 -->
    </div>
    <!-- 头部区域结束 -->
    <!-- 内容区域开始 -->
    <van-grid :column-num="2" class="grid" clickable>
      <van-grid-item>
        <i slot="icon" class="toutiao toutiao-shoucang"></i>
        <span slot="text" class="text">收藏</span>
      </van-grid-item>
      <van-grid-item>
        <i slot="icon" class="toutiao toutiao-lishi"></i>
        <span slot="text" class="text">历史</span>
      </van-grid-item>
    </van-grid>
    <van-cell-group class="cell-group">
      <van-cell is-link>
        <span slot="title"> 消息通知 </span>
      </van-cell>
      <van-cell is-link>
        <span slot="title"> 小智同学 </span>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="loginOut" v-if="$store.state.userToken"  @click="loginOut">
      <van-cell>
        <span slot="title"
          >退出登录</span
        >
      </van-cell>
    </van-cell-group>
    <!-- 内容区域结束 -->
  </div>
</template>

<script>
import { getUserInfo } from '@/api/my/userinfo.js'
export default {
  data () {
    return {
      Token: this.$store.state.userToken,
      infoList: []
    }
  },
  created () {
    this.updataInfo()
  },
  mounted () {},
  methods: {
    loginOut: function () {
      this.$dialog.confirm({
        title: '退出提示',
        message: '确认退出吗'
      })
        .then(() => {
          // 清除token值
          this.$store.commit('addToken', null)
        })
        .catch(() => {
          // on cancel
        })
    },
    // 用户信息刷新到页面
    async updataInfo () {
      const { data } = await getUserInfo()
      this.infoList = data.data
      console.log(data)
    }
  }
}
</script>

<style lang="less" scoped>
.my-header {
  width: 100%;
  height: 400px;
  background: url(~@/assets/banner.png) left top;
  background-size: cover;
  //   登录注册区域
  .loginNone {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loginNone-con {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .van-image {
        width: 132px;
        height: 132px;
      }
      p {
        font-size: 28px;
        color: #ffffff;
        margin-top: 15px;
      }
    }
  }
  //   已登录区域
  .alreadyLogin {
    padding: 116px 33px 33px 33px;
    box-sizing: border-box;
    .myInfo {
      display: flex;
      justify-content: space-between;
      .myInfo-left {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #ffffff;
        .van-image {
          width: 132px;
          height: 132px;
          margin-right: 22px;
        }
        p {
          margin: 0;
        }
      }
      .myInfo-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .editInfo {
          height: 33px;
          font-size: 20px;
          color: #666;
          border-radius: 16px;
          border: none;
          background-color: #ffffff;
        }
      }
    }
    ul {
      margin-top: 55px;
      display: flex;
      justify-content: space-between;
      padding: 0 60px;
      li {
        display: flex;
        flex-direction: column;
        .count {
          font-size: 36px;
          color: #ffffff;
          text-align: center;
        }
        .text {
          font-size: 23px;
          color: #ffffff;
          text-align: center;
          margin-top: 6px;
        }
      }
    }
    /deep/.van-image__img{
      border-radius: 50%;
    }
  }
}
.grid {
  .toutiao-shoucang {
    font-size: 45px;
    color: #eb5253;
  }
  .toutiao-lishi {
    font-size: 45px;
    color: #ff9d1d;
  }
  .text {
    font-size: 28px;
    margin-top: 6px;
  }
}
.cell-group {
  margin-top: 9px;
  van-cell {
    height: 100px;
  }
}
.loginOut {
  margin-top: 9px;
  text-align: center;
  height: 100px;
  span {
    font-size: 30px;
    color: #d86262;
  }
}
</style>
